<template>
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="任务名称">
          <el-input size="small" v-model="query.name" placeholder="任务名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
          </el-button>
          <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
        </el-form-item>
      </el-form>
      <el-tabs type="card" v-model="tabName" @tab-click="handleClick">
        <el-tab-pane label="未读" name="unRead">
          <el-table header-row-class-name="container-table-header" :data="data" size="small" style="width: 100%;margin-bottom: 20px;"
                    row-key="taskId" border stripe v-loading="loading">
            <el-table-column prop="title" label="标题" min-width="300" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="fromUserName" label="发送人">
            </el-table-column>
            <el-table-column prop="createTime" label="发送时间">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-view" @click="showViewDialog(scope.row, true)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="container-page">
            <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="page.current"
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已读" name="read">
          <el-table header-row-class-name="container-table-header" :data="data" size="small" style="width: 100%;margin-bottom: 20px;"
                    row-key="taskId" border stripe v-loading="loading">
            <el-table-column prop="title" label="标题" min-width="300" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="fromUserName" label="发送人">
            </el-table-column>
            <el-table-column prop="createTime" label="发送时间">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-view" @click="showViewDialog(scope.row, false)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="container-page">
            <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="page.current"
              :page-sizes="[10, 20, 30, 40, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

<!--    <task-view :dialog="taskViewDialog" :fkId="fkId" :viewPage ="viewPage" @closeDialog="closeTaskViewDialog"/>-->
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import {fetchList, doReadMessage} from "@/api/act/message";

export default {
  directives: {
  },
  components: {
  },
  dictTypes: ['audit_type'],
  data() {
    return {
      importBox: false,
      isEdit: false,
      isView: false,
      viewBox: false,
      formBox: false,
      formTitle: '',
      loading: false,
      query: {},
      form: {
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      selectionRow: [],
      fileList: [], // 文件

      tabName: 'unRead',
      taskViewDialog: false,
      viewPage: '',
      fkId: '',
    }
  },
  computed: {
    ...mapGetters(["permissions", "messageCount"])
  },
  created() {
    this.query.status = 0;
    this.onLoad(this.page);
  },
  methods: {
    resetForm() {
      this.formBox = false;
      this.viewBox = false;
      this.isEdit = false;
      this.isView = false;
      this.form = {};
      this.formTitle = '';
      this.$refs['optForm'] && this.$refs['optForm'].resetFields();
      this.viewBox = false;
      this.printBox = false;
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      if(this.query.publishDates) {
        this.query.startDate = this.query.publishDates[0];
        this.query.endDate = this.query.publishDates[1];
      }
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },
    handleClick(tab, event) {
      this.query.status = this.tabName === 'unRead' ? 0 : 1;
      this.onSearch();
    },
    closeTaskViewDialog() {
      this.taskViewDialog = false;
    },
    showViewDialog(row, unRead) {
      if(unRead) {
        // 标记已读
        doReadMessage(row.id).then(res => {
          this.loading = false;
          const data = res.data.data;
          const message = this.messageCount - data
          this.$store.commit('SET_MESSAGE', {message})
        });

        this.$message({
          type: "success",
          message: '消息已读'
        });
        this.onSearch();
      }
      /*this.fkId = row.fkId;
      this.viewPage = row.toUrl;
      this.taskViewDialog = true;*/
      if(row.toUrl) {
        console.info(row.toUrl)
        this.$router.push({
          path: this.$router.$avueRouter.getPath({
            name: '',
            src: row.toUrl,
          })
        }).catch(() => {});
      }
    }
  }
};
</script>

<style>
</style>
